<script setup>
import { ref, nextTick } from "vue";
import { onReachBottom, onShow } from "@dcloudio/uni-app";
import { get } from "@/request/request";
import { config } from "@/config";
import wxcode from 'uniapp-qrcode'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import loginModale from '@/pages/components/login.vue';

const verified = ref(false);
const records = ref(false);
const orderlist = ref([]);
const hoursePopup = ref(false);
const inputValue = ref('');

const searchForm = ref({
  page: 1,
  pageSize: 5,
})

const formDataOrder = ref({
  orderSn: '',
  hourse: ''
})

const loginAuth = ref(false);

onShow(() => {
  const sessionKey = uni.getStorageSync("sessionKey");
  const auth = uni.getStorageSync('auth');
  if (!sessionKey || !auth) {
    // 当sessionKey不存在或auth为false时，显示提示框
    nextTick(() => {
      uni.showModal({
        title: '提示',
        content: sessionKey && !auth ? '您的登录信息已失效，请重新登录' : '您还没登录，请先登录',
        confirmColor: '#0045cf',
        success: function (res) {
          if (res.confirm) {
            loginAuth.value = true;
          } else if (res.cancel) {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }
        }
      });
    });
  } else {
    // 当sessionKey和auth都存在且有效时，执行其他逻辑
    orderlist.value = [];
    getOrderList();
  }
});



//核销
const isEmpty = ref(false);

const aaaa = uni.getStorageSync("disCode")
console.log('aaaa', aaaa);



onReachBottom(() => {
  if (!isEmpty.value) {
    searchForm.value.page += 1;
  }
  getOrderList();
})

const getOrderList = () => {
  get('/order_list', searchForm.value, { "sessionKey": uni.getStorageSync("sessionKey") }).then((res) => {
    console.log('核销记录：', res);
    if (res.data.list.length === 0) {
      isEmpty.value = true;
      searchForm.value.page = searchForm.value.page;
    } else {
      isEmpty.value = false;
    }
    orderlist.value = [...orderlist.value, ...res.data.list]
  })
}


//核销记录
const verification = ref([])
const recordsClick = (item) => {
  verification.value = item.verification;
  console.log('recordsClick', verification.value);
  records.value = true;
}


//弹出输入核销课时
const verifiedClick = (item) => {
  formDataOrder.value.orderSn = item.sn;
  hoursePopup.value = true
}
//核销二维码
const rightClick = () => {
  formDataOrder.value.hourse = inputValue.value;
  hoursePopup.value = false;
  wxcode.qrcode('qrcode', JSON.stringify(formDataOrder.value), 560, 560);
  verified.value = true;
}


const leftClick = () => {
  hoursePopup.value = false;
  uni.showToast({
    title: '核销已取消',
    icon: 'error'
  });
}
</script>

<template>
  <view class="app">
    <view v-if="orderlist.length" v-for="item in orderlist" class="orders">
      <view class="orderId">
        <view style="font-size: 24rpx">订单号：{{ item.sn }}</view>
        <view style="font-size: 28rpx;color: #D54941;margin: 50rpx">待使用</view>
      </view>
      <view class="order-img">
        <image :src="item.cover ? config.baseUrl + '/file/' + item.cover : '/static/avatar.jpg'" />
        <view style="display: flex;justify-content: space-around;flex-direction: column">
          <view style="font-size: 28rpx;color: #040000">{{ item.countyName }}：{{ item.courseName }}</view>
          <view style="font-size: 24rpx;color: #828282">已上：{{ item.already }}/{{ item.totalTime }}时</view>
        </view>
      </view>
      <view class="remainingTime">剩余可用时间{{ item.remainder }}小时</view>
      <view class="btn-box">
        <TnButton :width="104" :height="64" bg-color="#f3f3f3" text-color="#000" border-color="#DCDCDC" :border="true"
          @click="verifiedClick(item)">
          核销
        </TnButton>
        <TnButton :width="160" :height="64" bg-color="#f3f3f3" text-color="#000" border-color="#DCDCDC" :border="true"
          @click="recordsClick(item)">
          核销记录
        </TnButton>
      </view>
    </view>
    <view v-else style="margin-top: 200rpx;font-size: 36rpx;color: #b4b2ad">
      ——您还没有关于订单的信息——
    </view>
  </view>
  <TnPopup v-model="verified" open-direction="bottom">
    <view class="tn-p-lg">
      <view style="display: flex;justify-content: center;">

        <canvas class="code-item" canvas-id="qrcode" style="height: 560rpx;width: 560rpx;text-align: center;" />
      </view>
    </view>
  </TnPopup>
  <TnPopup v-model="records" open-direction="bottom" bg-color="#f1f1f1">
    <scroll class="recording">
      <view class="title">
        <TnTitle size="lg" title="核销记录" />
      </view>
      <scroll-view scroll-y class="scroll">
        <view class="hexiao" v-for="item in verification">
          <TnTitle size="sm" title="已使用" />
          <view style="display: flex;">
            <view style="color: #9c9c9c;">核销课时间</view>
            <view style="margin-left: 20rpx;">{{ item.classHour }}小时</view>
          </view>
          <view style="display: flex;">
            <view style="color: #9c9c9c;">核销教师</view>
            <view style="margin-left: 20rpx;">{{ item.tname }}</view>
          </view>
          <view style="display: flex;">
            <view style="color: #9c9c9c;">核销时间</view>
            <view style="margin-left: 20rpx;">{{ item.createTime }}</view>
          </view>
        </view>
        <view
          style="width: 100%;display: flex;justify-content: center;align-items: center;height: 300rpx;font-size: 36rpx;color: #D54941;"
          v-if="verification.length === 0">暂时没有核销记录
        </view>
      </scroll-view>
    </scroll>
  </TnPopup>
  <TnPopup v-model="hoursePopup">
    <view style="width: 600rpx;display: flex;align-items: center;justify-content: center;flex-direction: column;">
      <view style="padding: 20rpx;">
        <TnTitle size="lg" title="输入你要核销的教课时间" />
      </view>
      <view style="display: flex;width: 100%;align-items: center;justify-content: center;">
        <TnInput v-model="inputValue" :underline="true" type="number" placeholder="输入核销时间如：1" />
        <view>课时</view>
      </view>
      <view style="display: flex;width: 100%;align-items: center;justify-content: space-around;margin: 10rpx;">
        <TnButton height="70" width="50%" bg-color="#fff" @click="rightClick">确定</TnButton>
        <TnButton height="70" width="50%" bg-color="#fff" @click="leftClick">取消</TnButton>
      </view>
    </view>
  </TnPopup>
  <!-- 登录组件 -->
  <loginModale v-model:show="loginAuth" @login-success="getOrderList" />
</template>

<style scoped lang="scss">
.app {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .orders {
    margin: 10rpx;
    width: 686rpx;
    height: 432rpx;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    border-radius: 12rpx;
    background: #FFFFFF;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.08);


    .orderId {
      margin: 20rpx;
      width: 100%;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .order-img {
      height: 128rpx;
      width: 100%;
      display: flex;
      align-items: center;

      image {
        margin: 20rpx;
        width: 128rpx;
        height: 128rpx;
        border-radius: 16rpx;
      }
    }

    .remainingTime {
      margin: 20rpx;
      width: 258rpx;
      height: 48rpx;
      font-size: 24rpx;
      background: #F3F3F3;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6rpx;
    }

    .btn-box {
      margin-left: 300rpx;
      right: 60rpx;
      color: red;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: space-evenly;
    }
  }
}

.recording {
  height: 200rpx;
  overflow-y: auto;

  .title {
    padding: 20rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .scroll {
    height: 912rpx;
    width: 100%;


    .hexiao {
      margin-left: 32rpx;
      margin-top: 10rpx;
      width: 686rpx;
      height: 304rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 25rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 28rpx;
    }
  }
}
</style>
